<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
      th{
          text-align: left;
      }
     
      a{
          text-decoration: none;
      }

      .text{
          overflow: hidden;
      }

      ul{
          list-style: none;
      }

      .error{
          color: red;
      }

      .comment{
          width: 500px;
          background-color: lightgray;
          margin-bottom: 10px;
      }
   </style>
</head>
<body>
    <form action="/detail">

        <h3><%=id[0].keyword%></h3>
        <p>创建于：<%=moment(id[0].createdate).format("YYYY-MM-DD")%><br/><br/>
            <%=id[0].news%>
        </p>

        
    
     </form>

     <h3>评论</h3>
        <ul class="talklist">

        </ul>

       <div>
          快速评论：<br/>
          <textarea name="msg" id="msg" cols="20" rows="3"></textarea><span class="error"></span>
        <br/><br/>
        <input type="submit" class="btn" value="提交">
        <button><a href="/index">返回首页</a></button>
       </div>

     <script src="/jquery-3.6.0.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>
        {
            let socket=io();
            $(".btn").click(function(){
               
                if($("#msg").val()==""){
                    $(".error").text("请填写评论内容!!")
                }
              
                if($("#msg").val() !=""){
                    $(".error").text("")
                }

                    socket.emit("chat",{
                        "msg":$("#msg").val(),
                    })

                    $("#msg").val("")

               
            })

            socket.on("back",function(msg){
                $(".talklist").prepend("<li class='comment'>"+msg.msg+"</li>")
            })

        }
     </script>

</body>
</html>